<template>
  <div class="user-info">
    <el-form :model="form" label-width="100px">
      <!-- 账号 -->
      <el-form-item label="账号">
        <el-input v-model="form.username" disabled />
      </el-form-item>
      <!-- 信用度 -->
      <el-form-item label="信用度">
        <el-input v-model="form.credit" disabled />
      </el-form-item>
      <!-- 昵称 -->
      <el-form-item label="昵称">
        <el-input v-model="form.nickname" />
      </el-form-item>
      <!-- 性别 -->
      <el-form-item label="性别">
        <el-select v-model="form.sex" class="m-2" placeholder="性别" size="large">
          <el-option v-for="item in sex" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <!-- 提交 -->
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交修改</el-button>
      </el-form-item>
    </el-form>
  </div>
  <!-- <el-descriptions class="margin-top" :size="size" :column="3" border>
    <template #extra>
      <el-button type="primary">修改</el-button>
    </template>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <user />
          </el-icon>
          账号
        </div>
      </template>
      {{ userinfo.username }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <iphone />
          </el-icon>
          昵称
        </div>
      </template>
      {{ userinfo.nickname }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <location />
          </el-icon>
          邮箱
        </div>
      </template>
      {{ userinfo.email }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <tickets />
          </el-icon>
          性别
        </div>
      </template>
      <el-tag size="small" v-if="userinfo.sex===1">男</el-tag>
      <el-tag size="small" v-else="userinfo.sex===2">女</el-tag>
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <office-building />
          </el-icon>
          信用度
        </div>
      </template>
      {{ userinfo.credit }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <office-building />
          </el-icon>
          余额
        </div>
      </template>
      {{ userinfo.money }}
    </el-descriptions-item>
  </el-descriptions> -->
</template>

<script lang="ts" setup>
import { computed, ref, reactive, onMounted } from 'vue'
import {
  Iphone,
  Location,
  OfficeBuilding,
  Tickets,
  User,
} from '@element-plus/icons-vue'

// 父组件传参
const props = defineProps<{
  userinfo: any,
}>()

// 表单字段
const form = reactive<any>({
  username: '',
  credit: '',
  nickname: '',
  sex: 0
});

const sex = [
  {
    value: 0,
    label: '未知',
  },
  {
    value: 1,
    label: '男',
  },
  {
    value: 2,
    label: '女',
  },
]

// 提交表单
const onSubmit = () => {
  console.log('form', form)
}

onMounted(() => {
  form.username = props.userinfo.username;
  form.credit = props.userinfo.credit;
  form.nickname = props.userinfo.nickname;
  form.sex = props.userinfo.sex;
})
</script>

<style lang="less" scoped>
.user-info {
  margin-top: 20px;
  width: 600px;
}
</style>